<template>
  <!-- 左侧导航栏 -->
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    background-color="#FFFFFF" text-color="black" text-align="left">
    <el-submenu :index="navMenu.menuId + ''" v-for="navMenu in menuData" :key="navMenu.menuId">
      <!-- 一级导航 -->
      <template v-slot:title><i :class="navMenu.icon"></i><span style="font-size: 16px; font-weight: bold">{{
        navMenu.menuName }}</span>
      </template>
      <el-menu-item :index="childMenu.menuId + ''" v-for="childMenu in navMenu.children" :key="childMenu.menuId">
        <!-- 二级导航 -->
        <template v-slot:title>
          <i :class="childMenu.icon" style="color: black"></i>
          <span @click="click(childMenu.url)" style="font-weight: bold;float: right">{{ childMenu.menuName }}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "LeftMenu",
  //数据
  data() {
    return {
      //el-tree 的数据
      menuData: [],
    };
  },
  //初始化数据
  created() {
    this.$http.get("/system/menu/leftMenu").then((res => {
      //获取菜单数据
      if (res.data.code === 200) {
        this.menuData = res.data.data;
      }
    }), errorMsg => {
      this.$message({
        message: errorMsg,
        type: 'error'
      });
    });
  },
  methods: {
    handleOpen(key, keyPath) { },
    handleClose(key, keyPath) { },
    click(t) {
      // console.log(t)
      if (t != null && t !== "" && t !== "null" && t !== "undefined") {
        //当点击左侧菜单时，使用路由 添加页签
        this.$router.push(t);
      }
    },
  },
}
</script>
<style scoped></style>
